<template>
	<view class="content fofa bacFFF poRel">
		<tabnav title="创建企业" :col="back"></tabnav>
		<view style="height: 40rpx;"></view>
		<view class="wid90 mar">
			<view class="hei80 dis disAl">上传营业执照/相关证明文件</view>
			<view class="wid90 mar dis disAl disJuC borRad20 mar-top20 poRel" @click="upImage"
				style="height: 260rpx;border: 1rpx dotted #A8A8A8;">
				<image v-if="!image" src="https://www.sign.run/applet/static/wode/shangchuan.png" style="width: 68rpx;height: 65rpx;"></image>
				<image v-if="image" :src="image" class="borRad10" style="width: 160rpx;height: 220rpx;"></image>
				<uni-icons v-if="image" type="clear" size="30" @click.native.stop="deleteClick" class="poAbs"
					style="top: 10rpx;right: 30rpx;"></uni-icons>
			</view>
			<view class="wid90 mar">
				<view style="height: 60rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">证件类型</view>
				<picker class="wid100" @change="bindPickerChange" :value="type" :range="xuanze">
					<view class="hei80 dis disAl disJuB foSi30">
						<view>{{xuanze[type]}}</view>
						<uni-icons size="25" type="right"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">企业名称</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="firmName" placeholder="请输入企业名称" />
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">统一社会信用代码</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="socialCode" placeholder="请输入统一社会信用代码" />
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">法定代表人姓名</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="name" placeholder="请输入法定代表人姓名" />
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">所在地区</view>
				<picker mode="region" class="wid100" @change="districtChange" :value="date">
					<view class="hei80 dis disAl disJuB foSi30">
						<view v-if="province">{{province+'-'+city+'-'+area}}</view>
						<view v-if="!province" style="color: #8A8A8A;">请选择所在地区</view>
						<image src="https://www.sign.run/applet/static/wode/dingwei.png" @click.native.stop="getLocation"
							style="width: 24rpx;height: 32rpx;"></image>
					</view>
				</picker>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">详细地址</view>
				<view class="wid100 hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="detailedAddress" placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="xia"></view>
		</view>
		<view class="wid100 dis disAl disJuC poAbs" style="height: 140rpx;bottom: 0;">
			<view class="wid80 dis disAl disJuC coFFF hei80 foSi35 borRad10" @click="tijiao"
				:style="'background-color: '+back+';'">提交</view>
		</view>
		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				back: uni.getStorageSync('back'),
				image: '',
				xuanze: ['企业', '个体工商户', '党证机关及事业单位', '其他组织'],
				type: 0,
				firmName: '',
				socialCode: '',
				name: '',
				province: '',
				city: '',
				area: '',
				detailedAddress: ''
			}
		},
		onLoad() {

		},
		methods: {
			tijiao() {
				if (!this.image) {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'error'
					})
					return
				}
				if (!this.firmName) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'error'
					})
					return
				}
				if (!this.socialCode) {
					uni.showToast({
						title: '请输入信用代码',
						icon: 'error'
					})
					return
				}
				if (!this.name) {
					uni.showToast({
						title: '请输入代表人姓名',
						icon: 'error'
					})
					return
				}
				if (!this.province) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'error'
					})
					return
				}
				if (!this.detailedAddress) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'error'
					})
					return
				}
				uni.navigateBack({
					delta: 1
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.type = e.detail.value
			},
			districtChange(e) {
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.area = e.detail.value[2];
			},
			tiaozhuan(url) {
				uni.redirectTo({
					url: url
				});
			},
			deleteClick() {
				this.image = ''
			},
			upImage(index) {
				var that = this
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
						that.image = res.tempFilePaths[0]; //拿到选择的图片，是一个数组
						// that.shangchuan(tempFilePaths,index)
					}
				});
			},
			shangchuan(tempFilePaths, index) {
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/common/upload',
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							that.image = apiresult.data.url
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon: 'error'
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon: 'error'
						})
					}
				});
			},
			formatLocation(res) {
				var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
				var REGION_PROVINCE = [];
				var addressBean = {
					REGION_PROVINCE: null,
					REGION_COUNTRY: null,
					REGION_CITY: null,
					ADDRESS: null
				};

				function regexAddressBean(address, addressBean) {
					// regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
					regex = /^(.*?[市]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
					var addxress = regex.exec(address);
					addressBean.REGION_CITY = addxress[1];
					addressBean.REGION_COUNTRY = addxress[2];
					addressBean.ADDRESS = addxress[3] + "(" + res.name + ")";
					// console.log(addxress);
				}
				if (!(REGION_PROVINCE = regex.exec(res.address))) {
					regex = /^(.*?(省|自治区))(.*?)$/;
					REGION_PROVINCE = regex.exec(res.address);
					addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
					regexAddressBean(REGION_PROVINCE[3], addressBean);
				} else {
					addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
					regexAddressBean(res.address, addressBean);
				}
				return addressBean
			},
			getLocation(obj, address, name) {
				var that = this
				// console.log(obj, name, address);
				uni.chooseLocation({
					success: function(res) {
						// console.log(res);
						var locationObj = that.formatLocation(res);
						that.province = locationObj.REGION_PROVINCE;
						that.city = locationObj.REGION_CITY;
						that.area = locationObj.REGION_COUNTRY;
						that.detailedAddress = locationObj.ADDRESS
					},
					fail: function() {
						uni.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success: function(tip) {
											if (tip.confirm) {
												uni.openSetting({
													success: function(data) {
														if (data
															.authSetting[
																"scope.userLocation"
																] === true
															) {
															uni.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//授权成功之后，再调用chooseLocation选择地方
															uni.chooseLocation({
																success: function(
																	res
																	) {
																	var locationObj =
																		that
																		.formatLocation(
																			res
																			);
																	that.province =
																		locationObj
																		.REGION_PROVINCE;
																	that.city =
																		locationObj
																		.REGION_CITY;
																	that.area =
																		locationObj
																		.REGION_COUNTRY;
																	that.detailedAddress =
																		locationObj
																		.ADDRESS
																},
															})
														} else {
															uni.showToast({
																title: '授权失败',
																icon: 'none',
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: function(res) {
								uni.showToast({
									title: '调用授权窗口失败',
									icon: 'none',
									duration: 1000
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}

	.xia {
		height: 1rpx;
		background: #BFBFBF;
	}
</style>